<template>
  <el-table-column v-bind="col.attrs">
    <template v-if="col.children">
      <cvp-columns v-for="(item, index) in col.children" :key="index" :col="item"></cvp-columns>
    </template>
    <template #header v-if="col.defaultSlot && col.defaultSlot.header">
      <!-- <slot :name="col.defaultSlot.header" :column="col" :index="scope.$index"></slot> -->
      <!-- <cvpHeader :self="self"   :slots="slotHeader" :key="col.defaultSlot.header" :name="col.defaultSlot.header"></cvpHeader> -->
      <div v-html="col.defaultSlot.header"></div>
    </template>
    <template #default="scope" v-if="!col.children || col.children.length == 0">
      <template v-if="col.render">
        <cvp-expand :column="col" :row="scope.row" :render="col.render" :index="scope.$index" />
      </template>
      <template v-else-if="col.defaultSlot && col.defaultSlot.default">
        <slot
          :name="col.defaultSlot.default"
          :row="scope.row"
          :column="col"
          :index="scope.$index"
        ></slot>
      </template>
      <template v-else>
        <span>{{ scope.row[col.attrs.prop] }}</span>
      </template>
    </template>
  </el-table-column>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, nextTick } from 'vue'
import cvpExpand from './components/expand.vue'
export default defineComponent({
  name: 'CvpColumns',
  components: { cvpExpand },
  props: {
    col: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      slotHeader: this.$slots,
      self: this
    }
  },
  mounted() {
    if (Object.keys(this.$slots).length > 0) {
      this.slotHeader = this.$slots
    }
    // Object.keys(this.$slots).length > 0 ? this.slotHeader = this.$slots :  console.log((this.slotHeader) )
    // console.log(this.$slots)
  }
  // setup(props,ctx){
  //   const slots = ref({})
  //   onMounted(() => {
  //     nextTick(() => {
  //       Object.keys(slots.value).length == 0 ? slots.value = ctx.slots :  console.log((slots.value) )
  //       // Object.keys(slots.value).length > 0 &&  console.log((slots.value) )
  //     })
  //   })
  //   return {
  //     slots
  //   }
  // }
})
</script>
